<!--主页代码-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table {
                width:100%;
                background: lightblue;
                border-collapse: collapse;
            }
            
            td {
                width: 50%;
                border: 2px solid white;
                text-align: center;          
            }

        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入城市" value="郑州" id="city">
        <br>
        <button id="btn">利用ajax发送请求(参数需要放在header中)</button>
        <table id="city_table">
            <tr>
                <td>城市名称</td>
                <td>城市id</td>
            </tr>
        </table>
        <script src="jquery-3.1.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //回调函数
                $("#btn").click(function () {
                    //1.获取可用的城市列表
                    // alert(111); 弹出来 点击事件没问题
                    //  var cityname = $("#city").val();
                    $.ajax({
                        url: "http://apis.baidu.com/apistore/weatherservice/citylist",
                        type: "get",
                         //data:"cityname="+cityname,                  
                        //标签中的值拿出来放到data里面
                        data:{citname:$("#city").val()},
                        //数据返回的类型
                        dataType: 'json',
                         // 前面可以不加一号 值是字符串要加引号 基本类型 不用加 引号
                        headers: {'apikey': '764bea985cfd0e960fdca55c95d26f27'},
                        success: function (response,status,xhr) {
                        //                        对象有这个字段 获得数组
                        //输出的东西添加到表里  数据组装成heml代码
                            if(response.errMsg === 'success') {
                                var retData = response.retData;
                                var html = $("#city_table").html();
                                for(var i=0;i<retData.length;i++) {
                                    var city_obj = retData[i];
                                    html += '<tr>';
                                    html += '<td>';
                                    html += "<a target='__blank' href='city_weather.php?cityname="+city_obj.name_cn+"&cityid="+city_obj.area_id+"'>";
                                    html += city_obj.name_cn;
                                    html += "</a>";
                                    html += '</td>'
                                    html += '<td>';
                                    html += city_obj.area_id;
                                    html += '</td>'
                                    html += '</tr>';
                                }                               
                                $("#city_table").html(html);
                            }
                        }
                    });
                });
            });

        </script>
    </body>
</html>